<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垃圾分类小游戏</title>
    <style>
        #title{
            width: 346px;
            height: 130px;
            border-color: #888888;
            border-style:solid;
            border-width:2px;
            text-align: center;
            font-size: 30px;
            color: #2D93CA;
        }
        #control{
            margin-top: 1px;
            width: 351px;
            height: 50px;
        }
        #box{
            margin-top: 1px;
        }
        .btn{
            width: 49.2%;
            height: 100%;
            border-color: #888888;
            border-style:solid;
            border-width:2px;
            color: black;
            font-size: 20px;
        }
        img{
            width: 80px;
            height: 150px;
            border-color: #888888;
            border-style:solid;
            border-width:2px;
        }

        #judge{
            margin-top: -1px;
            width: 351px;
            height: 300px;
        }

        .hand{
            width: auto;
            display:inline-block;
            margin-right: 7px;
            float: left;
            /*height: 80px;*/
        }
        .hand img{
            width: 80px;
            height: 90px;
            display:inline-block;
            border: none;
        }
        .blank{
            border: none;
            width: auto;

        }
        #text{

        }
        textarea{
            height: 100px;
            width: 1000px;
            resize: none;
        }
    </style>
</head>
<body>
<div id="game" align="center">
    <div id="title">
        <p>{{garbageName}}</p>
    </div>
    <div id="control">
        <button type="button" @click="startPlay" class="btn">开始</button>
        <button type="button" @click="stopPlay" class="btn">停止</button>
    </div>
    <div id="box">
        <img @mouseover="over(1)" @mouseleave="leave()" @click="sorting('厨余垃圾', 1)" src="img/chuyu.jpg">
        <img @mouseover="over(2)" @mouseleave="leave()"  @click="sorting('可回收垃圾', 2)" src="img/kehuishou.jpg">
        <img @mouseover="over(3)" @mouseleave="leave()"  @click="sorting('其它垃圾', 3)" src="img/qita.jpg">
        <img @mouseover="over(4)" @mouseleave="leave()"   @click="sorting('有害垃圾', 4)" src="img/youhai.jpg">
    </div>

    <div id="judge">
        <div class="hand">
            <img v-show="isShow==1" src="img/hand.jpg">
            <br>
            <img v-show="isTrue==1" src="img/yes.jpg">
            <img v-show="isFalse==1" src="img/no.jpg">
            <br>
            <img class="blank" src="img/blank.jpg">
        </div>
        <div class="hand">
            <img v-show="isShow==2" src="img/hand.jpg">
            <br>
            <img v-show="isTrue==2" src="img/yes.jpg">
            <img v-show="isFalse==2" src="img/no.jpg">
            <br>
            <img class="blank" src="img/blank.jpg">
        </div>
        <div class="hand">
            <img v-show="isShow==3" src="img/hand.jpg">
            <br>
            <img v-show="isTrue==3" src="img/yes.jpg">
            <img v-show="isFalse==3" src="img/no.jpg">
            <br>
            <img class="blank" src="img/blank.jpg">
        </div>
        <div class="hand">
            <img v-show="isShow==4" src="img/hand.jpg">
            <br>
            <img v-show="isTrue==4" src="img/yes.jpg">
            <img v-show="isFalse==4" src="img/no.jpg">
            <br>
            <img class="blank" src="img/blank.jpg">
        </div>

    </div>
    <div v-if="count!=0" id="text">
        <textarea id="area" disabled>{{records}}</textarea>
    </div>


</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#game",
        data:{
            isShow:0,
            garbage:JSON.parse('[{"garbageId": 1, "garbageFlag": "纸类", "garbageInfo": "再生利用", "garbageName": "报纸", "garbageType": "可回收垃圾"},{"garbageId": 2, "garbageFlag": "纸类", "garbageInfo": "再生利用", "garbageName": "传单", "garbageType": "可回收垃圾"},{"garbageId": 3, "garbageFlag": "纸类", "garbageInfo": "再生利用", "garbageName": "杂志", "garbageType": "可回收垃圾"},{"garbageId": 4, "garbageFlag": "纸类", "garbageInfo": "再生利用", "garbageName": "旧书", "garbageType": "可回收垃圾"},{"garbageId": 5, "garbageFlag": "纸类", "garbageInfo": "再生利用", "garbageName": "纸板箱", "garbageType": "可回收垃圾"},{"garbageId": 6, "garbageFlag": "纸类", "garbageInfo": "再生利用", "garbageName": "未受污染的纸制品", "garbageType": "可回收垃圾"},{"garbageId": 7, "garbageFlag": "金属", "garbageInfo": "再生利用", "garbageName": "铁制品", "garbageType": "可回收垃圾"},{"garbageId": 8, "garbageFlag": "金属", "garbageInfo": "再生利用", "garbageName": "铜制品", "garbageType": "可回收垃圾"},{"garbageId": 9, "garbageFlag": "金属", "garbageInfo": "再生利用", "garbageName": "铝制品", "garbageType": "可回收垃圾"},{"garbageId": 10, "garbageFlag": "玻璃", "garbageInfo": "再生利用", "garbageName": "玻璃瓶罐", "garbageType": "可回收垃圾"},{"garbageId": 11, "garbageFlag": "玻璃", "garbageInfo": "再生利用", "garbageName": "平板玻璃", "garbageType": "可回收垃圾"},{"garbageId": 12, "garbageFlag": "玻璃", "garbageInfo": "再生利用", "garbageName": "其他玻璃制品", "garbageType": "可回收垃圾"},{"garbageId": 13, "garbageFlag": "除塑料袋外的塑料制品", "garbageInfo": "再生利用", "garbageName": "泡沫塑料", "garbageType": "可回收垃圾"},{"garbageId": 14, "garbageFlag": "除塑料袋外的塑料制品", "garbageInfo": "再生利用", "garbageName": "塑料瓶", "garbageType": "可回收垃圾"},{"garbageId": 15, "garbageFlag": "除塑料袋外的塑料制品", "garbageInfo": "再生利用", "garbageName": "硬塑料", "garbageType": "可回收垃圾"},{"garbageId": 16, "garbageFlag": "橡胶及橡胶制品", "garbageInfo": "再生利用", "garbageName": "橡胶及橡胶制品", "garbageType": "可回收垃圾"},{"garbageId": 17, "garbageFlag": "利乐包装", "garbageInfo": "再生利用", "garbageName": "牛奶盒", "garbageType": "可回收垃圾"},{"garbageId": 18, "garbageFlag": "饮料瓶", "garbageInfo": "再生利用", "garbageName": "可乐罐", "garbageType": "可回收垃圾"},{"garbageId": 19, "garbageFlag": "饮料瓶", "garbageInfo": "再生利用", "garbageName": "塑料饮料瓶", "garbageType": "可回收垃圾"},{"garbageId": 20, "garbageFlag": "饮料瓶", "garbageInfo": "再生利用", "garbageName": "啤酒瓶", "garbageType": "可回收垃圾"},{"garbageId": 21, "garbageFlag": "电池", "garbageInfo": "安全填埋、焚烧", "garbageName": "蓄电池", "garbageType": "有害垃圾"},{"garbageId": 22, "garbageFlag": "电池", "garbageInfo": "安全填埋、焚烧", "garbageName": "钮扣电池", "garbageType": "有害垃圾"},{"garbageId": 23, "garbageFlag": "废旧电子产品", "garbageInfo": "安全填埋、焚烧", "garbageName": "废旧电子产品", "garbageType": "有害垃圾"},{"garbageId": 24, "garbageFlag": "废旧灯管灯泡", "garbageInfo": "安全填埋、焚烧", "garbageName": "废旧灯管灯泡", "garbageType": "有害垃圾"},{"garbageId": 25, "garbageFlag": "过期药品", "garbageInfo": "安全填埋、焚烧", "garbageName": "过期药品", "garbageType": "有害垃圾"},{"garbageId": 26, "garbageFlag": "过期日用化妆品", "garbageInfo": "安全填埋、焚烧", "garbageName": "过期日用化妆品", "garbageType": "有害垃圾"},{"garbageId": 27, "garbageFlag": "染发剂", "garbageInfo": "安全填埋、焚烧", "garbageName": "染发剂", "garbageType": "有害垃圾"},{"garbageId": 28, "garbageFlag": "杀虫剂容器", "garbageInfo": "安全填埋、焚烧", "garbageName": "杀虫剂容器", "garbageType": "有害垃圾"},{"garbageId": 29, "garbageFlag": "除草剂容器", "garbageInfo": "安全填埋、焚烧", "garbageName": "除草剂容器", "garbageType": "有害垃圾"},{"garbageId": 30, "garbageFlag": "废弃水银温度计", "garbageInfo": "安全填埋、焚烧", "garbageName": "废弃水银温度计", "garbageType": "有害垃圾"},{"garbageId": 31, "garbageFlag": "废油漆桶", "garbageInfo": "安全填埋、焚烧", "garbageName": "废油漆桶", "garbageType": "有害垃圾"},{"garbageId": 32, "garbageFlag": "废打印机墨盒", "garbageInfo": "安全填埋、焚烧", "garbageName": "废打印机墨盒", "garbageType": "有害垃圾"},{"garbageId": 33, "garbageFlag": "硒鼓", "garbageInfo": "安全填埋、焚烧", "garbageName": "硒鼓", "garbageType": "有害垃圾"},{"garbageId": 34, "garbageFlag": "食物残余", "garbageInfo": "堆肥、制作饲料", "garbageName": "剩菜剩饭", "garbageType": "厨余垃圾"},{"garbageId": 35, "garbageFlag": "食物残余", "garbageInfo": "堆肥、制作饲料", "garbageName": "西餐糕点", "garbageType": "厨余垃圾"},{"garbageId": 36, "garbageFlag": "菜梗菜叶", "garbageInfo": "堆肥、制作饲料", "garbageName": "菜梗菜叶", "garbageType": "厨余垃圾"},{"garbageId": 37, "garbageFlag": "动物骨骼内脏", "garbageInfo": "堆肥、制作饲料", "garbageName": "动物骨骼内脏", "garbageType": "厨余垃圾"},{"garbageId": 38, "garbageFlag": "茶叶渣", "garbageInfo": "堆肥、制作饲料", "garbageName": "茶叶渣", "garbageType": "厨余垃圾"},{"garbageId": 39, "garbageFlag": "水果残余", "garbageInfo": "堆肥、制作饲料", "garbageName": "水果残余", "garbageType": "厨余垃圾"},{"garbageId": 40, "garbageFlag": "果壳瓜皮", "garbageInfo": "堆肥、制作饲料", "garbageName": "果壳瓜皮", "garbageType": "厨余垃圾"},{"garbageId": 41, "garbageFlag": "盆景等植物", "garbageInfo": "堆肥、制作饲料", "garbageName": "残枝落叶", "garbageType": "厨余垃圾"},{"garbageId": 42, "garbageFlag": "废弃食用油", "garbageInfo": "堆肥、制作饲料", "garbageName": "废弃食用油", "garbageType": "厨余垃圾"},{"garbageId": 43, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "纸杯", "garbageType": "其它垃圾"},{"garbageId": 44, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "照片", "garbageType": "其它垃圾"},{"garbageId": 45, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "复写纸", "garbageType": "其它垃圾"},{"garbageId": 46, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "压敏纸", "garbageType": "其它垃圾"},{"garbageId": 47, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "收据用纸", "garbageType": "其它垃圾"},{"garbageId": 48, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "明星片", "garbageType": "其它垃圾"},{"garbageId": 49, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "相册", "garbageType": "其它垃圾"},{"garbageId": 50, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "卫生纸", "garbageType": "其它垃圾"},{"garbageId": 51, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "尿片", "garbageType": "其它垃圾"},{"garbageId": 52, "garbageFlag": "受污染或其他不可回收的玻璃", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "受污染或其他不可回收的玻璃", "garbageType": "其它垃圾"},{"garbageId": 53, "garbageFlag": "塑料袋与其他受污染的塑料制品", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "塑料袋与其他受污染的塑料制品", "garbageType": "其它垃圾"},{"garbageId": 54, "garbageFlag": "废旧衣物与其他纺织品", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "废旧衣物与其他纺织品", "garbageType": "其它垃圾"},{"garbageId": 55, "garbageFlag": "破旧陶瓷品", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "破旧陶瓷品", "garbageType": "其它垃圾"},{"garbageId": 56, "garbageFlag": "妇女卫生用品", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "妇女卫生用品", "garbageType": "其它垃圾"},{"garbageId": 57, "garbageFlag": "", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "一次性餐具", "garbageType": "其它垃圾"},{"garbageId": 58, "garbageFlag": "贝壳", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "贝壳", "garbageType": "其它垃圾"},{"garbageId": 59, "garbageFlag": "烟头", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "烟头", "garbageType": "其它垃圾"},{"garbageId": 60, "garbageFlag": "灰土", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "灰土", "garbageType": "其它垃圾"}]'),
            garbageName: '',
            isTrue:0,
            isFalse:0,
            resultFlag: 0,
            lotteryTimer: null,
            count:0,
            records:' '
        },
        methods:{
            startPlay: function () {
                this.resultFlag = 0;
                if (!this.lotteryTimer) {
                    this.lotteryTimer = setInterval(this.lottery, 500);
                }
                this.isTrue = 0;
                this.isFalse = 0;
            },
            stopPlay: function () {
                clearInterval(this.lotteryTimer);
                this.lotteryTimer = null;
            },
            sorting: function (garbageType, garbageNum) {
                this.resultFlag = 0;
                var textarea = document.getElementById('area');
                if(this.garbage[this.lotteryNumber].garbageType == garbageType){
                    this.count++;
                    this.isTrue = garbageNum;
                    this.isFalse = 0;
                    this.records += "记录编号："+this.count+"      用途："+this.garbage[this.lotteryNumber].garbageInfo+"      名称："+this.garbage[this.lotteryNumber].garbageName + "      所选类型："+garbageType +"      结果：正确"+" \n ";
                }else{
                    this.count++;
                    this.resultFlag = 0;
                    // alert(this.garbage[this.lotteryNumber].garbageType);
                    this.isFalse = garbageNum;
                    this.records += "记录编号："+this.count+"      用途："+this.garbage[this.lotteryNumber].garbageInfo+"      名称："+this.garbage[this.lotteryNumber].garbageName + "      所选类型："+garbageType +"      结果：错误"+" \n ";

                }
                textarea.scrollTop = textarea.scrollHeight;
            },
            lottery: function () {
                this.lotteryNumber = Math.floor(Math.random() * this.garbage.length);
                this.garbageName = this.garbage[this.lotteryNumber].garbageName;
            },
            over:function (num) {
                this.isShow=num;
            },
            leave:function () {
                this.isShow=0;
            }
        }
    })
</script>
</body>
</html>

